<template>
	<view class="Cash">
		<u-toast ref="uToast"></u-toast>
		<u-navbar :autoBack="true" title="提现" :placeholder="true" bg-color="#F6F8FA"></u-navbar>
		<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" :errorType="errorType" labelWidth="200rpx">
			<view class="cash_body">
				<view class="cash_box">
					<u-form-item label="提现金额" prop="money" borderBottom>
						<u--input type="digit" v-model="form.money" border="none" placeholder="请输入"></u--input>
					</u-form-item>
					<u-form-item label="提现用户名" prop="name" borderBottom>
						<u--input v-model="form.name" border="none" placeholder="请输入提现用户名"></u--input>
					</u-form-item>
					<u-form-item label="提现号码" prop="mobile" borderBottom>
						<u--input type="number" v-model="form.mobile" border="none" placeholder="请输入提现号码"></u--input>
					</u-form-item>
					<view class="cash_tip">
						<view>平台收取{{process}}%提现手续费 线下转账</view>
						<view>可提现金额：{{money}}元</view>
					</view>
				</view>
				<view class="cash_box">
					<u-form-item label="提现至">
						<view class="cash_radio">
							<u-radio-group activeColor="#ff2d2e" v-model="form.pay_type" placement="row">
								<view @click="form.pay_type = item.id" class="flex_box cash_pay" v-for="(item, index) in payList" :key="index">
									<u-radio :name="item.id"></u-radio>
									<image class="cash_pay_img" :src="item.img"></image>
									<view>{{item.name}}</view>
								</view>
							</u-radio-group>
						</view>
					</u-form-item>
				</view>
				<view class="cash_btn"><u-button throttleTime="1000" color="#ff2d2e" shape="circle" :customStyle="btnStyle" @click="submit" text="立即提现"></u-button></view>
			</view>
		</u--form>
	</view>
</template>

<script>
import { agentIndex, agentWalletCash } from '@/common/http.api.js';
let that;
export default {
	data() {
		return {
			form: {
				money: '',
				name: '',
				mobile: '',
				pay_type: 1
			},
			errorType: 'toast',
			rules: {
				money: [
					{
						type: 'string',
						required: true,
						message: '请输入提现金额',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return parseFloat(value)<=parseFloat(this.money);
						},
						message: '您的可提现余额不足',
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return parseFloat(value)>parseFloat(this.min);
						},
						message: ()=>{
							return `至少提现${this.min}元`
						},
						trigger: ['change', 'blur']
					}
				],
				name: [
					{
						type: 'string',
						required: true,
						message: '请输入提现用户名',
						trigger: ['blur', 'change']
					},
				],
				mobile: [
					{
						type: 'string',
						required: true,
						message: '请输入提现号码',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '提现号码不正确',
						trigger: ['change','blur'],
					}
				]
			},
			btnStyle: {
				height: '88rpx'
			},
			inputStyle: { height: '80rpx', padding: '20rpx', backgroundColor: '#F4F4F4', borderRadius: '16rpx' },
			payList: [
				{
					name: '微信',
					id: 1,
					img: "/static/wx2.png"
				},
				{
					name: '支付宝',
					id: 2,
					img: "/static/zfb.png"
				},
			],
			process: '1',
			money: '',
			min: 1
		};
	},
	onLoad() {
		that = this;
	},
	onShow() {
		that.agentIndex();
	},
	onReady() {
		that.$refs.uForm.setRules(that.rules);
	},
	methods: {
		agentIndex() {
			agentIndex({params: {agent_token: that.agentInfo.agent_token}}).then(res => {
				that.money = res.data.money;
			})
			.catch(err => {
				uni.$u.toast(err.msg);
			});
		},
		submit() {
			console.log(that.form)
			that.$refs.uForm.validate().then(res => {
				agentWalletCash(uni.$u.deepMerge(that.form, {agent_token: that.agentInfo.agent_token})).then(res=>{
					that.form.money = ''
					that.agentIndex()
					that.$refs.uToast.show({
						type: "success",
						message: "提现申请中，请耐心等待",
						complete(){
							uni.$u.route({
								type: 'back',
								delta: 1
							});
						}
					});
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			}).catch(errors => {
				
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.Cash {
	min-height: 100vh;
	background-color: #F6F8FA;
	.cash_body {
		padding: 28rpx;
		.cash_box {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			padding: 10rpx 30rpx 0;
			.cash_tip{
				font-size: 26rpx;
				line-height: 40rpx;
				color: #999999;
				padding: 20rpx 0;
			}
			.cash_radio {
				padding: 10rpx 0 30rpx;
			}
			.cash_pay{
				margin-right: 40rpx;
				.cash_pay_img{
					width: 60rpx;
					height: 60rpx;
					margin: 0 20rpx;
				}
			}
		}
		.cash_box ::v-deep {
			.u-form-item__body__left__content__label{
				font-weight: 500;
				color: #1E272E;
				font-size: 32rpx;
				padding: 20rpx 0;
			}
			.uni-input-input{
				font-weight: bold;
				color: #1E272E;
				font-size: 32rpx;
			}
			.uni-input-placeholder{
				font-weight: 500;
				color: #D2DAE2;
				font-size: 32rpx;
			}
			.u-line{
				border-bottom: 2rpx solid #1E272E !important;
			}
		}
		.cash_btn{
			padding: 30rpx 46rpx 60rpx;
		}
	}
}
</style>
